<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { getCommissionListApi } from "@/api/billv2"
import { getAdminRoleListApi } from "@/api/system"
import dialogs from "./components/dialog.vue"
import uploads from "./components/upload.vue"

const dialogRefs = ref<InstanceType<typeof dialogs> | null>(null)
const uploadRefs = ref<InstanceType<typeof uploads> | null>(null)

import dayjs from "dayjs"
const currentDate = dayjs()

const searchData = reactive({
  month: currentDate.format("YYYY-MM"),
  uid: 4
})
interface Item {
  enter_prepay_and_invoiced_total: number
  enter_prepay_and_not_invoiced_total: number
  enter_not_prepay_and_invoiced_total: number
  enter_not_prepay_and_not_invoiced_total: number
  out_prepay_and_invoiced_total: number
  out_prepay_and_not_invoiced_total: number
  out_not_prepay_and_invoiced_total: number
  out_not_prepay_and_not_invoiced_total: number
  prepay_and_invoiced_total: number
  prepay_and_not_invoiced_total: number
  not_prepay_and_invoiced_total: number
  not_prepay_and_not_invoiced_total: number
  prepays: number
  invoiced: number
  total_commission: number
  nows_enter_billAmount: number
  lasts_enter_billAmount: number
  nows_out_billAmount: number
  lasts_out_billAmount: number
  nows_same_billAmount: number
  lasts_same_billAmount: number
  enter_difference: number
  out_difference: number
  same_difference: number
}
const listData = ref<Item | null>(null)
const userLists = ref<any>([])

const getTable = async () => {
  await getCommissionListApi({
    ...searchData
  }).then((res: any) => {
    console.log(res)
    listData.value = res.data as Item
  })
}
const getAdminList = async () => {
  await getAdminRoleListApi({
    role_ids: 2
  })
    .then((res) => {
      userLists.value = res.data
    })
    .catch(() => {})
    .finally(() => {})
}
onMounted(() => {
  getAdminList()
  getTable()
})
const customDateTimeFormat = ref<string>("YYYY-MM")

const doShows = () => {
  console.log("doShows")
  if (dialogRefs.value) {
    dialogRefs.value.dialogShow({
      uid: searchData.uid
    })
  }
}
const doUploads = () => {
  if (uploadRefs.value) {
    uploadRefs.value.dialogShow(searchData)
  }
}
</script>

<template>
  <div class="app-container">
    <el-card>
      <div class="heads">
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
          <el-form-item label="业务员">
            <el-select v-model="searchData.uid" placeholder="请选择" clearable>
              <el-option v-for="item in userLists" :key="item.id" :label="item.nickname" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-date-picker
              v-model="searchData.month"
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              type="month"
              placeholder="请选择月份"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doUploads">上传</el-button>
            <el-button type="primary" @click="getTable">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider border-style="dotted" />
      <div v-if="listData" class="box_cards">
        <div class="boxs">
          <div>入库</div>
          <div class="boxs2">
            <div style="border: 1px solid #ccc; width: 30%">
              <div style="text-align: center" @click="doShows">先款先票</div>
              <div style="border: 1px solid #ccc">
                <div style="border: 1px solid #ccc">
                  开票 <el-divider direction="vertical" /> {{ listData.enter_prepay_and_invoiced_total }}
                </div>
                <div style="border: 1px solid #ccc">
                  不开票 <el-divider direction="vertical" /> {{ listData.enter_prepay_and_not_invoiced_total }}
                </div>
              </div>
            </div>
            <div style="border: 1px solid #ccc; width: 30%">
              <div style="text-align: center" @click="doShows">非先款先票</div>
              <div style="border: 1px solid #ccc">
                <div style="border: 1px solid #ccc">
                  开票 <el-divider direction="vertical" /> {{ listData.enter_not_prepay_and_invoiced_total }}
                </div>
                <div style="border: 1px solid #ccc">
                  不开票 <el-divider direction="vertical" /> {{ listData.enter_not_prepay_and_not_invoiced_total }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="boxs">
          <div>出库</div>
          <div class="boxs2">
            <div style="border: 1px solid #ccc; width: 30%">
              <div style="text-align: center" @click="doShows">先款先票</div>
              <div style="border: 1px solid #ccc">
                <div style="border: 1px solid #ccc">
                  开票 <el-divider direction="vertical" /> {{ listData.out_prepay_and_invoiced_total }}
                </div>
                <div style="border: 1px solid #ccc">
                  不开票 <el-divider direction="vertical" /> {{ listData.out_prepay_and_not_invoiced_total }}
                </div>
              </div>
            </div>
            <div style="border: 1px solid #ccc; width: 30%">
              <div style="text-align: center" @click="doShows">非先款先票</div>
              <div style="border: 1px solid #ccc">
                <div style="border: 1px solid #ccc">
                  开票 <el-divider direction="vertical" /> {{ listData.out_not_prepay_and_invoiced_total }}
                </div>
                <div style="border: 1px solid #ccc">
                  不开票 <el-divider direction="vertical" /> {{ listData.out_not_prepay_and_not_invoiced_total }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="listData">
        <el-descriptions title="" border>
          <el-descriptions-item label="当月入库票据总金额">{{ listData.nows_enter_billAmount }}</el-descriptions-item>
          <el-descriptions-item label="当月出库票据总金额">{{ listData.nows_out_billAmount }}</el-descriptions-item>
          <el-descriptions-item label="当月同业务员票据总金额">{{
            listData.nows_same_billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="上个月入库票据总金额">{{
            listData.lasts_enter_billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="上个月出库票据总金额">{{ listData.lasts_out_billAmount }}</el-descriptions-item>
          <el-descriptions-item label="上个月同业务员票据总金额">{{
            listData.lasts_same_billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="和上个月入库票据金额差额">{{ listData.enter_difference }}</el-descriptions-item>
          <el-descriptions-item label="和上个月出库票据总金额">{{ listData.out_difference }}</el-descriptions-item>
          <el-descriptions-item label="和上个月同业务员票据总金额">{{ listData.same_difference }}</el-descriptions-item>
          <el-descriptions-item label="先款先票开票">{{ listData.prepay_and_invoiced_total }}</el-descriptions-item>
          <el-descriptions-item label="先款先票不开票">{{
            listData.prepay_and_not_invoiced_total
          }}</el-descriptions-item>
          <el-descriptions-item label="非先款先票开票">{{
            listData.not_prepay_and_invoiced_total
          }}</el-descriptions-item>
          <el-descriptions-item label="非先款先票不开票">{{
            listData.not_prepay_and_not_invoiced_total
          }}</el-descriptions-item>
          <el-descriptions-item label="先款先票提成">{{ listData.prepays }}</el-descriptions-item>
          <el-descriptions-item label="非先款先票提成">{{ listData.invoiced }}</el-descriptions-item>
          <el-descriptions-item label="总提成">{{ listData.total_commission }}</el-descriptions-item>
        </el-descriptions>
        <!-- <div>先款先票开票：{{ listData.prepay_and_invoiced_total }}</div>
        <div>先款先票不开票：{{ listData.prepay_and_not_invoiced_total }}</div>
        <div>非先款先票开票：{{ listData.not_prepay_and_invoiced_total }}</div>
        <div>非先款先票不开票：{{ listData.not_prepay_and_not_invoiced_total }}</div>
        <div>先款先票提成：{{ listData.prepays }}</div>
        <div>非先款先票提成：{{ listData.invoiced }}</div>
        <div>总提成：{{ listData.total_commission }}</div> -->
      </div>
    </el-card>
    <dialogs ref="dialogRefs" />
    <uploads ref="uploadRefs" />
  </div>
</template>

<style scoped lang="scss">
.heads {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.box_cards {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px;
  .boxs {
    width: 49%;
    border: 1px solid #ccc;
    .boxs2 {
      display: flex;
      width: 100%;
      justify-content: space-around;
      // border: 1px solid #ccc;
    }
  }
}
</style>
